<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
    style="padding-bottom: 20px;">
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="被谈话人" prop="realName">
          <a-input v-model="form.realName" :disabled="isDisabled" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="身份证号" prop="identityCard">
          <a-input v-model="form.identityCard" :disabled="isDisabled" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="次数" prop="interviewNum">
          <a-input v-model="form.interviewNum" :disabled="isDisabled" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="访谈类型" prop="type">
          <a-select v-model="form.type" :disabled="isDisabled" placeholder="请选择">
            <a-select-option value="1">定期访谈</a-select-option>
            <a-select-option value="2">日常访谈</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="访谈人员" prop="interviewZg">
          <a-input v-model="form.interviewZg" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="谈话时间" required prop="interviewActualTime">
          <a-date-picker allowClear v-model="form.interviewActualTime" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
            style="width:100%" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="16" class="qyItem">
        <a-form-model-item label="谈话地点" prop="interviewPlaceIdArr">
          <z-linkage-area placeholder="请选择行政区划" v-model="form.interviewPlaceIdArr" @rows="onRows"
            @change="setAdminDivisions" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="详细地址" prop="detailPlace">
          <a-input v-model="form.detailPlace" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <template v-if="isOverdue">
      <p class="pt">逾期信息（必填） <a-tooltip placement="rightBottom"
          :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
          <template slot="title">
            <div>该访谈已逾期，请填写以下逾期信息提交审批</div>
          </template>
          <a-icon type="question-circle" />
        </a-tooltip>
      </p>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="逾期原因" prop="overdueReason">
            <a-select v-model="form.overdueReason" placeholder="请选择">
              <a-select-option value="0">
                已访谈忘记录入
              </a-select-option>
              <a-select-option value="1">
                其他
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="原因说明" prop="overdueReasonExplain">
            <a-textarea v-model="form.overdueReasonExplain" placeholder="请输入至少五个字符"
              :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="附件">
            <j-upload v-model="form.overdueFile" :number="1"></j-upload>
            <p>支持扩展名：.jpg .png .pdf</p>
          </a-form-model-item>
        </a-col>
      </a-row>
    </template>
  </a-form-model>
</template>
<script>
// import * as caseApi from '@/api/wxSmuggle/caseEvent.js'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  props: ['isOverdue'],
  components: {},
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        sjskPersonId: undefined,
        realName: undefined,
        identityCard: undefined,
        type: "1", //只有定期访谈，写死
        interviewNum: undefined,
        interviewActualTime: undefined,
        interviewZg: undefined,
        interviewPlaceId: undefined,
        interviewPlaceIdArr: undefined,
        detailPlace: undefined,
        overdueReason: undefined,
        overdueReasonExplain: undefined
      },
      rules: {
        realName: [{ required: true, message: '请选择' }],
        sjskPersonId: [{ required: true, message: '请选择' }],
        identityCard: [{ required: true, message: '请输入' }],
        type: [{ required: true, message: '请选择' }],
        interviewNum: [{ required: true, message: '请输入' }],
        interviewZg: [{ required: true, message: '请输入' }],
        interviewActualTime: [{ required: true, message: '请选择' }],
        interviewPlaceIdArr: [{ required: true, message: '请选择' }],
        detailPlace: [{ required: true, message: '请输入' }],
        overdueReason: [{ required: true, message: '请选择' }],
        overdueReasonExplain: [{ required: true, message: '请输入' }],
      },
      isDisabled: true,
    }
  },
  created() { },
  methods: {
    // 获取行政区划的值
    setAdminDivisions(value) {
      // console.log("1111")
      // console.log(value)
    },
    onRows(row) {
      // console.log("value")
      // console.log(row)
      let str = ""
      row.forEach(item => {
        str += item.title + "," //保存行政区划名称
      })
      this.form.interviewPlace = str.slice(0, str.length - 1) //删除最后一个逗号
      // console.log(this.form.interviewPlace)
    },
    onValidate() {
      let isValid = false
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          isValid = true
        } else {
          isValid = false
        }
      })
      if (isValid) {
        return true
      } else {
        return false
      }
    },
    getData() {
      this.form.interviewPlaceId = this.form.interviewPlaceIdArr.join() //访谈地址id转字符串
      this.form.interviewNum = this.form.interviewNum.substring(1, this.form.interviewNum.length - 1) //截取数字字符,即次数
      return this.form
    },
    setData(obj) {
      // this.form = obj
      this.form = { type: "1" } //固定未定期访谈
      this.form.id = obj.id
      this.form.sjskPersonId = obj.sjskPersonId
      this.form.realName = obj.realName
      this.form.identityCard = obj.identityCard
      // this.form.interviewNum = obj.interviewNum
      //设置访谈地址
      // this.form.placeConConversationId = obj.placeConversationId
      if (obj.interviewPlaceId != undefined) {
        this.form.interviewPlaceIdArr = obj.interviewPlaceId.split(',')
        this.form.detailPlace = obj.detailPlace
      }
      if (obj.interviewNum == null) {
        this.form.interviewNum = "第0次"
      } else {
        this.form.interviewNum = "第" + obj.interviewNum + "次"
      }
      // this.form.interviewZg = Vue.ls.get(USER_INFO).username
      this.$set(this.form, 'interviewZg', Vue.ls.get(USER_INFO).realname)
      this.form.interviewZgUserId = Vue.ls.get(USER_INFO).id
      this.isDisabled = true
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > this.moment().endOf('day')
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56]
      }
    }
  }
}
</script>
<style scoped lang="less">
.pt {
  margin-top: 20px;
  // font-size: 16px;
  font-weight: bold;
  padding-top: 20px;
  border-top: 1px dotted #E9E9E9;
}

/deep/.ant-form-item {
  margin-bottom: 10px;
}

/deep/.ant-col-sm-3 {
  width: 10.5%;
}

/deep/.ant-col-sm-21 {
  width: 89.5%;
}

.qyItem {
  /deep/.ant-col-8 {
    width: 17%;
  }

  /deep/.ant-col-16 {
    width: 83%;
  }
}
</style>
